<template>
  <div class="gengxin">
    <div class="top">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="(item,index) in lunblist" :key="index">
          <img :src="item.imageUrl" class="" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐歌单 -->
    <div class="recomment-list">
      <div class="re-top">
        <div style="font-size:25px">推荐歌单</div>
        <div class="gengduo">更多》</div>
      </div>

      <div class="music-list">
        <div class="item" v-for="(item,index) in playlists" :key="index">
          <div class="xiala">66666</div>
          <img :src="item.coverImgUrl" alt="">
          <div class="list-data">{{item.name}}</div>
          <div class="play"><i class="el-icon-video-play"></i></div>
        </div>
      </div>
    </div>

    <!-- 独家放送  exclusive-->
    <div class="exclusive">
      <div class="re-top">
        <div style="font-size:25px">独家放送</div>
        <div class="gengduo">更多》</div>
      </div>

      <div class="exclusive-list">
        <div class="item" v-for="(item,index) in resultList" :key="index">
          <img :src="item.picUrl" alt="">
          <div class="list-data">{{item.name}}</div>
          <div class="play"><i class="el-icon-video-play"></i></div>
        </div>
      </div>
    </div>
    <div class="newMusic-list">
      <div class="top">
        <div style="font-size: 20px">最新音乐</div>
        <div>更多></div>
      </div>
      <div class="listMusic ">
        <div class="item" v-for="(item, index) in newResult" :key="index">
          <el-card shadow="hover">
            <div class="new-item flex-two">
              <!-- v-if v-else -->
              <div v-if='index<9'>0{{index+1}}</div>
              <div v-else>{{index+1}}</div>
              <div class="img" @click="getMusic(item.id)">
                <div class="playMusic"><i class="el-icon-video-play"></i></div>
                <img :src="item.picUrl" alt="" />
              </div>
              <div>
                <div>{{item.name}}</div>
                <div>{{item.alg}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- <div class="contents">
      <img :src="lunblist[0].imageUrl" alt="">
    </div> -->
  </div>
</template>

<script>
  import {
    getLunbo,
    getMusic,
    getExclusive,
    getNewMusic,
  
  } from "../../network/gengxin"
    import {
  
    getMusicPlace,
    getMusicdestily
  } from "../../network/play"

  // import {mapState} from "vuex"
  export default {
    name: "Gengxin",
    data() {
      return {
        lunblist: [],
        playlists: [],
        resultList: [],
        newResult: []
      }
    },
    created() {
      this.getlunbo(),
        this.getMusic1(),
        this.getExclusive1(),
        this.getNewMusicM()
    },
    // computed:{
    //   ...mapState(["changePlace"])
    // },
    methods: {
      //点击实现歌曲地址的获取
      getMusic(id){
        this.getMusicPlaceM(id)
        // console.log(id);
        this.getMusicdestilyM(id)
      },

      //获取歌曲的播放地址
      getMusicPlaceM(id){
        getMusicPlace("/song/url",{
          id:id
        }).then(res=>{
          // console.log(res.data[0].url);
          this.$store.commit("changePlace",res.data[0].url)
        })
      },

      getMusicdestilyM(id){
        getMusicdestily("song/detail",{
          ids:id
        }).then(res=>{
          console.log(res.songs[0]);
           this.$store.commit("changedestily",res.songs[0])
        })
      },



      // 获取轮播图数据方法
      getlunbo() {
        getLunbo('/banner ').then(res => {
          // console.log(res.banners[0].imageUrl);
          this.lunblist = res.banners
        })
      },
      getMusic1() {
        getMusic("/top/playlist", {
          limit: 10
        }).then(res => {
          // console.log(res.playlists);
          this.playlists = res.playlists
        })
      },

      getExclusive1() {
        getExclusive("/personalized/privatecontent").then(res => {
          // console.log(res.result);
          // this.playlists = res.playlists
          this.resultList = res.result
        })
      },
      //最新
      getNewMusicM() {
        getNewMusic("/personalized/newsong").then((res) => {
          // console.log(res);
          this.newResult = res.result;
        });
      }
    }
  }
</script>

<style lang="less">
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .gengxin .top {
    width: 100%;

    img {
      width: 100%;
      // height: 200px;
    }
  }

  .recomment-list {
    .re-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #aaa;
      padding: 5px 0;
      margin-bottom: 20px;

      .gengduo {
        color: rgb(170, 170, 170);
      }
    }
  }

  .music-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 56px;

    .item {
      position: relative;
      // display: flex;
      width: 200px;
      height: 250px;
      overflow: hidden;
      margin-right: 18px;
      margin-bottom: 10px;

      img {
        width: 100%;
        height: 200px;

      }

      .xiala {
        position: absolute;
        transform: translateY(-30px);
        transition: transform .3s;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        background-color: rgba(0, 0, 0, .5);
      }

      .play {
        position: absolute;
        top: 130px;
        right: 10px;
        transform: translateX(55px);
        transition: transform .3s;
        color: red;
        font-size: 45px;
      }
    }

  }

  .exclusive {
    .re-top {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #aaa;
      padding: 5px 0;
      margin-bottom: 20px;

      .gengduo {
        color: rgb(170, 170, 170);
      }
    }
  }

  .exclusive-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 107px;

    .item {
      position: relative;
      // display: flex;
      width: 311px;
      height: 250px;
      border: 1px solid #aaa;
      overflow: hidden;
      margin-right: 18px;
      margin-bottom: 10px;

      &:nth-last-child(1) {
        margin-right: 0;
      }

      img {
        width: 100%;
        height: 200px;

      }

      .xiala {
        position: absolute;
        transform: translateY(-30px);
        transition: transform .3s;
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        background-color: rgba(0, 0, 0, .5);
      }

      .play {
        position: absolute;
        top: 130px;
        right: 10px;
        transform: translateX(55px);
        transition: transform .3s;
        font-size: 45px;
      }
    }

  }

  // 最新音乐
  .newMusic-list {
    .top {
      display: flex;
      justify-content: space-between;
      height: 40px;
      border-bottom: 2px solid #aaa;
      margin-bottom: 16px;
    }

    .listMusic {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0 50px;

      .item {
       
         width: 50%;

        .new-item {
          height: 60px;
   display: flex;
        flex-wrap: wrap;
        align-items: center;
          .img {
            position: relative;

            .playMusic {
              position: absolute;
              height: 40px;
              width: 40px;
              font-size: 30px;
              color: orange;
              right: 20px;
              bottom: 0px;
            }

            img {
              margin-left: 20px;
              margin-right: 22px;
              width: 100px;
              height: 60px;
            }
          }

        }
      }
    }
  }


  .item:hover .xiala {
    transform: translateY(0px);
  }

  .item:hover .play {
    transform: translateX(0px);
  }
</style>